<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<title></title>
	</head>
	<body>
		
		<div id="demo">{{ fullName }}</div>
			
		<script type="text/javascript">
			// var vm = new Vue({
			//   el: '#demo',
			//   data: {
			//     firstName: 'Foo',
			//     lastName: 'Bar',
			//     fullName: 'Foo Bar'
			//   },
			//   watch: {
			//     firstName: function (val) {
			//       this.fullName = val + ' ' + this.lastName
			//     },
			//     lastName: function (val) {
			//       this.fullName = this.firstName + ' ' + val
			//     }
			//   }
			// })
			
			// var vm = new Vue({
			//   el: '#demo',
			//   data: {
			//     firstName: 'Foo',
			//     lastName: 'Bar'
			//   },
			//   computed: {
			//     fullName: function () {
			//       return this.firstName + ' ' + this.lastName
			//     }
			//   }
			// })
			
			var vm = new Vue({
			  el: '#demo',
			  data: {
			    firstName: 'Foo',
			    lastName: 'Bar'
			  },
			computed: {
			  fullName: {
				// getter
				get: function () {
				  return this.firstName + ' ' + this.lastName
				},
				// setter
				set: function (newValue) {
				  var names = newValue.split(' ')
				  this.firstName = names[0]
				  this.lastName = names[names.length - 1]
				}
			  }
			}
			})
		</script>
			
	</body>
</html>
